<template>
<canvas id="c"></canvas>
</template>

<script setup lang="ts">
import * as THREE from 'three';
import { onMounted } from 'vue'

/**
 * 初始化Three.js场景、相机、渲染器并创建动画
 * 这是页面挂载后执行的主函数
 */
function main() {
	// 获取画布元素并创建WebGL渲染器
	// antialias: true 启用抗锯齿，提高渲染质量
	const canvas = document.querySelector('#c');
	const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });

	/**
	 * 配置透视相机参数
	 * fov: 视场角，控制可见范围的角度大小
	 * aspect: 宽高比，影响渲染结果的比例
	 * near: 近平面，决定相机可以看到的最近距离
	 * far: 远平面，决定相机可以看到的最远距离
	 */
	// 相机配置
	const fov = 75;              // 视场角 (75度)
	const near = 0.1;            // 近平面距离
	const far = 5000;            // 远平面距离
	
	// 获取画布的实际尺寸
	const canvasRect = canvas.getBoundingClientRect();
	const aspect = canvasRect.width / canvasRect.height; // 动态计算宽高比
	
	const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
	camera.position.z = 2;       // 设置相机位置

	/**
	 * 调整渲染器和相机大小
	 * 确保渲染内容不会被拉伸或模糊
	 */
	function resizeRendererToDisplaySize(renderer) {
		const canvas = renderer.domElement;
		const canvasRect = canvas.getBoundingClientRect();
        const pixelRatio = window.devicePixelRatio;
        const width = Math.floor( canvasRect.width * pixelRatio );
        const height = Math.floor( canvasRect.height * pixelRatio );
        const needResize = canvasRect.width !== width || canvasRect.height !== height;
		
		if (needResize) {
			// 更新渲染器尺寸，使用设备像素比避免模糊
			renderer.setSize(width, height, false);
			
			// 更新相机宽高比
			camera.aspect = width / height;
			camera.updateProjectionMatrix();
		}
		
		return needResize;
	}
	
	// 初始调整大小
	resizeRendererToDisplaySize(renderer);
	
	// 监听窗口大小变化事件
	window.addEventListener('resize', () => {
		resizeRendererToDisplaySize(renderer);
	});

	// 创建3D场景容器
	const scene = new THREE.Scene();

	/**
	 * 创建立方体几何体
	 * 定义立方体的尺寸参数
	 * 并使用基础材质进行渲染
	 */
	// 几何体配置
	const boxWidth = 1;
	const boxHeight = 1;
	const boxDepth = 1;
	const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

	// 材质配置 - 使用基础材质并设置为蓝绿色
	const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 }); // 蓝绿色

	// 创建网格对象并添加到场景
	const cube = new THREE.Mesh(geometry, material);
	scene.add(cube);

    // 环境光
	const color = 0xFFFFFF;
    const intensity = 3;
    const light = new THREE.DirectionalLight( color, intensity );
    light.position.set( - 1, 2, 4 );
    scene.add( light );

	/**
	 * 渲染循环函数
	 * @param {number} time - 时间戳（毫秒）
	 * 该函数将每一帧更新立方体旋转并渲染场景
	 */
	function render(time) {
		// 检查并调整渲染器大小
		resizeRendererToDisplaySize(renderer);
		
		// 将毫秒转换为秒
		time *= 0.001;

		// 根据时间更新立方体旋转
		cube.rotation.x = time;
		cube.rotation.y = time;

		// 渲染场景
		renderer.render(scene, camera);
		
		// 请求下一帧动画
		requestAnimationFrame(render);
	}

	// 启动渲染循环
	requestAnimationFrame(render);
}

// 组件挂载后执行Three.js初始化
onMounted(() => {
	main();
});


</script>

<style scoped>
html, body {
   margin: 0;
   height: 100%;
}
#c {
   width: 100%;
   height: 100%;
   display: block;
}
.home {
  padding: 20px;
  text-align: center;
}

h1 {
  color: #42b883;
}

a {
  color: #3b82f6;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>